<template>
    <div>
        <p>Home Page</p>
        <p>
            {{ message }}
        </p>
        <button @click="btnClick">按钮</button>
    </div>
</template>

<script>
export default {
    props: {
        message: {
            type: String,
            required: true
        },
    },
    methods: {
        btnClick() {
            this.$emit("btnClick")  //触发emit事件
        }
    },
    /**
    * 1.参数:props,父组件传递过来属性
    * 2.上下文:context,有3个属性
    * 2.1 attrs:所有非props的attribute
    * 2.2 slots 父组件传递过来插槽(这个在以渲染函数返回时会有作用)
    * 2.3 emit 当组件内部需要发出事件时会用到emit(因为我们不能访问this,所以不可以通过this.$emit发出事件)
    */
    setup(props, context) {
        // 注意不能在setup中使用this,不能用this.message获取属性
        // 直接使用参数props
        console.log(props.message);
        console.log(context.attrs.id, context.attrs.class);
        console.log(context.slots);
        console.log(context.emit);
    }
    // context参数解构写法
    // setup(props, {attrs,slots,emit}) {
    //         // 注意不能在setup中使用this,不能用this.message获取属性
    //         // 直接使用参数props
    //         console.log(props.message);
    //         console.log( attrs.id,  attrs.class);
    //         console.log( slots );
    //         console.log( emit );
    //     }
    // 按需写入参数
        // setup(props, {attrs,emit}) { //只用context的attrs和emit属性
    //         // 注意不能在setup中使用this,不能用this.message获取属性
    //         // 直接使用参数props
    //         console.log(props.message);
    //         console.log( attrs.id,  attrs.class);
    //         console.log( emit );
    //     }
}
</script>

<style lang="scss" scoped>
</style>